<script setup lang="ts">
import { ref } from 'vue'
import SonComp from './components/SonComp.vue'
const money = ref(100)
const score = ref(60)
</script>

<template>
  <div class="playground-page">
    <h1>playground</h1>
    <!-- 
      <son-comp :money="money" @update:money="money = $event"></son-comp>
      vue2 简写
      :money.sync
      vue3 简写
      v-model:money

      vue3 废弃了.sync 他把这个语法合并到v-model，其他子组件内部的实现和vue2还是一样的 update:xxx 
      .sync挪到前面v-model
     -->
    <!-- <son-comp :money="money" @update:money="money = $event"></son-comp> -->
    <!-- 
      v-model
      vue2 value input
      vue3 modelValue update:modelValue
        v-model='xxx' 完整写法 v-model:modelValue='xxx'
        子组件里接受的字段 modelValue
        子传父的事件 update:modelValue
     -->
    <!-- <son-comp
      v-model:money="money"
      :model-value="score"
      @update:model-value="score = $event"
    ></son-comp> -->
    <son-comp v-model:money="money" v-model:modelValue="score"></son-comp>
    <!-- 
      v-model记忆方式
      v-model:xxx='yyy' 当xxx是modelValue 可以简写为 v-model='yyy'
      组件接收的字段xxx 当xxx是modelValue接受的就是modelValue
      子传父事件update:xxx 当xxx是modelValue update:modelValue
      如果是modelValue就把xxx替换成modelValue
     -->
  </div>
</template>

<style scoped lang="scss"></style>
